<script>
			var module_inits = [];
			
			function load_init_modules() {
				for (var i = 0; i < module_inits.length; i++) {
					module_inits[i]();
				}
			}
			
			function call_me(fun) {
				module_inits.push(fun);
			}
			onload = load_init_modules;
		</script>

		<script>
			var slider_images_url = [

			];
			var e_desc = '{$title}';
		</script>

<style type="text/css">
    
    *
    {
        padding: 0px;
        margin: 0px;
        -webkit-box-sizing: border-box;
    }

    body
    {
        background-color: black;

    }

    #container
    {
        width: 500px;
        height: 110%;
        position: absolute;
        overflow: hidden;
        top: -10%;
        left: 0px;
        background-color: black;
        /*background-image: url(__DIR__{$dir}/img/s.jpg); */
    }
     @-webkit-keyframes liuxing
    {
        0%{-webkit-transform:translate(0px,0px) rotate(0deg);opacity: 1;-webkit-animation-timing-function:linear;}
/*            5%{-webkit-transform:translate(-50px,-10px) #viewer_id#rotate(0deg);opacity: 1}*/
        30%{-webkit-transform:translate(-500px,100px) rotate(-5deg);opacity: 0;-webkit-animation-timing-function:ease-in;}
        100%{-webkit-transform:translate(-500px,100px) rotate(-5deg);opacity: 0;-webkit-animation-timing-function:ease-in;}
    }
    @-webkit-keyframes fadein
    {
        from {opacity: 0}
        to   {opacity: 1}
    }
    @-webkit-keyframes fadeout
    {
        from {opacity: 1}
        to   {opacity: 0}
    }
</style>
<link rel="stylesheet" href="__DIR__{$dir}/css/style.css" />
<script type="text/javascript" src="__DIR__{$dir}/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="__DIR__{$dir}/js/ipresenter.packed.js"></script>

<div id='container' class='container'>
    <img src='__DIR__{$dir}/img/s.jpg' style='position:absolute;top:0px;left:0px;height:900px;'>
    <img src='__DIR__{$dir}/img/2000.png' style='position:absolute;top:100px;left:500px;-webkit-animation: liuxing 5s ease-in 1s infinite;'>
    <img src='__DIR__{$dir}/img/2000.png' style='position:absolute;top:200px;left:500px;-webkit-animation: liuxing 5s ease-in 2s infinite;'>
    <img src='__DIR__{$dir}/img/2000.png' style='position:absolute;top:300px;left:500px;-webkit-animation: liuxing 5s ease-in infinite;'>
    <img src='__DIR__{$dir}/img/2000.png' style='position:absolute;top:0px;left:500px;-webkit-animation: liuxing 5s ease-in 1.5s infinite;'>
    <img src='__DIR__{$dir}/img/2000.png' style='position:absolute;top:400px;left:500px;-webkit-animation: liuxing 5s ease-in 3s infinite;'>
    <img src='__DIR__{$dir}/img/2000.png' style='position:absolute;top:500px;left:500px;-webkit-animation: liuxing 5s ease-in 4s infinite;'>
    <div id="ipresenter">
        <div id='xuandiv1' class="step" data-x="0" data-y="0" data-pausetime="3000">
            <img id='xuanimg1' width='400'/>
        </div>
        <div id='xuandiv2' class="step" data-x="1500" data-y="0" data-rotatex="180" data-easing="easeInOutQuint" data-pausetime="3000">
            <img id='xuanimg2' width='400'/>
        </div>
        <div id='xuandiv3' class="step" data-x="3000" data-y="0" data-rotatey="180" data-pausetime="3000">
            <img id='xuanimg3' width='400'/>
        </div>
        <div id='xuandiv4' class="step" data-x="4500" data-y="0" data-rotatex="180" data-pausetime="3000">
            <img id='xuanimg4' width='400'/>
        </div>
        <div id='xuandiv5' class="step" data-x="6000" data-y="0" data-rotate="180" data-pausetime="3000">
            <img id='xuanimg5' width='400'/>
        </div>
        <div id='xuandiv6' class="step" data-x="7500" data-y="0" data-rotatey="180" data-pausetime="3000">
            <img id='xuanimg6' width='400'/>
        </div>
        <div id='xuandiv7' class="step" data-x="9000" data-y="0" data-pausetime="3000">
            <img id='xuanimg7' width='400'/>
        </div>
        <div id='xuandiv8' class="step" data-x="10500" data-y="0" data-rotate="80" data-pausetime="3000">
            <img id='xuanimg8' width='400'/>
        </div>
        <div id='xuandiv9' class="step" data-x="12000" data-y="0" data-rotatex="180" data-pausetime="3000">
            <img id='xuanimg9' width='400'/>
        </div>
        <div id='xuandiv10' class="step" data-x="13500" data-y="0" data-rotatey="180" data-pausetime="3000">
            <img id='xuanimg10' width='400'/>
        </div>
        <div id='xuandiv11' class="step" data-x="13000" data-y="0" data-rotatey="-180" data-pausetime="3000">
            <img id='xuanimg11' width='400'/>
        </div>
        <div id='xuandiv12' class="step" data-x="16500" data-y="0" data-rotatey="180" data-pausetime="3000">
            <img id='xuanimg12' width='400'/>
        </div>
    </div>

</div>
<div id='pagetitle' style='position:absolute;width:500px;height:600px;top:0px;left:0px;font-size:45px;color:#fff;overflow:hidden;opacity:0;'>
    <div style='display:table;width:500px;height:200px;top:280px;left:0px;position:absolute;text-align:center;overflow:hidden;position:absolute;'>
        <div id='titlecontent' style='display:table-cell;width:500px;height:200px;vertical-align:middle;padding-left:10px;padding-right:10px;line-height:150%;oveflow:hidden;position:absolute;text-shadow:1px 1px 1px #000'></div>
    </div>
</div>


<script>
var image_size_width=[];
var image_size_height=[];
var image_ready_num=0;
var image_url_index=0;
var have_num = 0;
var canshow = true;
var reshow = false;
var timeout1;
var inter1;
var pageindex = 1;
function id(name)
{
    return document.getElementById(name);
}

function load_images()
{
    reshow = false;
    image_size_width=[];
    image_size_height=[];
    Onload_imgs_url=[];
    image_ready_num=18;
    image_url_index=0;
    have_num = 0;
    // id('page1').style.webkitAnimation = '';
    // id('page2').style.webkitAnimation = '';
    // id('page1').style.display = 'none';
    // id('page2').style.display = 'none';
    // clearTimeout(timeout1);
    // clearTimeout(timeout2);
    begin_titletime = new Date();
    begin_titletime = begin_titletime.getTime();
    showtitle();
    clearTimeout(timeout1);
    clearInterval(inter1);
    canshow = true;


    for(var i=0;i<slider_images_url.length;i++)
    {
        var img=new Image();
        img.index=i;
        img.src=slider_images_url[i];
        img.onload=image_onload;
    }       
}
function showtitle()
{
    if(reshow == true)
        return;
    var content = id('titlecontent');
    content.innerHTML = e_desc;
    id('pagetitle').style.webkitAnimation = 'fadein .5s linear both';
}
function distitle()
{
    if(reshow == true)
        return;
    id('pagetitle').style.webkitAnimation = 'fadeout 1s linear both';
}


function image_onload(event)
{
    if(reshow == true)
        return;

    var img=event.target;
    var index = img.index;

    if(index < 18)
    {
        Onload_imgs_url[index] = img.src;
        image_size_height[index] = img.height;
        image_size_width[index] = img.width;
        have_num++;
    }
    else
    {
        Onload_imgs_url[image_ready_num] = img.src;
        image_size_width[image_ready_num] = img.width;
        image_size_height[image_ready_num] = img.height;
        image_ready_num++;
    }
    if((have_num >= 18 || slider_images_url.length == have_num) && canshow == true)
    {   
        reshow = false;
        canshow =false;
        var end_titletime = new Date();
        end_titletime = end_titletime.getTime();
        var dis_titletime = Math.abs(end_titletime-begin_titletime);
        delaytime = 3000;
        if(dis_titletime>delaytime)
        {
            distitle();
            timeout1 = setTimeout(begin_show,500);
        }
        else
        {
            dis_titletime = delaytime- dis_titletime;
            timeout1 = setTimeout(function()
                {
                    distitle();
                    timeout2 = setTimeout(begin_show,500);
                },dis_titletime);
        }

    }
}

function begin_show()
{
    images_init();
    get_ready();
    timeout1 = setTimeout(function()
    {
        set_next_img();
        inter1 =  setInterval(set_next_img,5000);
    },1000);
}
function set_next_img()
{
    if(pageindex == 13)
        pageindex =1;
    if(image_url_index == Onload_imgs_url.length)
    {
        image_url_index = 0;
    }
    id('xuanimg'+pageindex).src = Onload_imgs_url[image_url_index];
    pageindex++;
    image_url_index++;
}
function reload_scene()
{
    reshow = true;
    Onload_imgs_url = [];
    for(var i =0; i<slider_images_url.length;i++)
    {
        Onload_imgs_url[i] = slider_images_url[i];
    }
    image_url_index = 0;
    images_init();
}

function get_ready()
{
    $(document).ready(function(){
        $('#ipresenter').iPresenter({
            animSpeed: 2500,
            // timer: '360Bar',s
            // timerDiameter: 60,
            // timerStroke: 5,
            // timerPadding: 5,
            // timerColor: '#000',
            // timerBg: '#FFF',
            timerOpacity: 0
            // directionNav: false,
            // controlNav: true
        });
    });
    id('ipresenter').style.webkitAnimation = 'fadein 2s ease-in both';
}

function images_init()
{
    for(var i=1; i<13;i++)
    {
        var img = id('xuanimg'+i);
        if(image_url_index == Onload_imgs_url.length)
            image_url_index = 0;
        img.src= Onload_imgs_url[image_url_index];
        image_url_index++;
    }
    image_url_index = 0;
}

call_me(load_images);

</script>



	<link type="text/css" rel="stylesheet" href="__DIR__{$dir}/css/guanzhu.css?ver=3" />
	<link rel="stylesheet" type="text/css" href="__DIR__{$dir}/css/buttons.css" />
	
	<style type="text/css">
		@-webkit-keyframes zhuan
		{
			0%
			{
				-webkit-transform:rotate(0deg);
			}

			100%
			{
				-webkit-transform:rotate(360deg);
			}
		}


		@-webkit-keyframes aa_out_bounce_left
		{
		    0%{
		        -webkit-transform:translateX(0)
		    }
		    20%{
		        -webkit-transform:translateX(20px)
		    }
		    100%{
		        -webkit-transform:translateX(-125px)
		    }
		}
		@-webkit-keyframes aa_in_bounce_center
		{
		    0%{
		        opacity:0;
		        -webkit-transform:scale(.3)
		    }
		    50%{
		        opacity:1;
		        -webkit-transform:scale(1.05)
		    }
		    70%{
		        -webkit-transform:scale(.9)
		    }
		    100%{
		        -webkit-transform:scale(1)
		    }
		}
		@-webkit-keyframes jinbi
		{
			from {-webkit-transform: rotateY(0deg);}
			to   {-webkit-transform: rotateY(180deg);}
		}
		.jubao-item
		{
			position: relative;
			float: left;
			width: 360px;
			height: 55px;
			top: 0px;
			font-size: 20px;
			line-height: 55px;
			margin-left: 20px;
			border-bottom: 1px solid #EBEBEB;
		}
		.jubao-radio
		{
			position: absolute;
			right: 10px;
			width: 25px;
			height: 25px;
			top: 20px;
		}

		.jubao-detail
		{
			position: relative;
			float: left;
			width: 360px;
			margin-left: 20px;
		}
		.jubao-detail textarea
		{
			width: 360px;
		    height: 80px;
		    font-size: 20px;
		    resize: none;
		    line-height: 40px;
		    border: none;
		    background-color: #eee;
		    border-radius: 10px;
		    padding-left: 10px;
		}
		@-webkit-keyframes guangzhu_ani
		{
			from  {-webkit-transform: scale(1);}
			to    {-webkit-transform: scale(1.05);}
		}
		@-webkit-keyframes che_ani
		{
		    0%    {-webkit-transform: translate(-20px,0px);opacity: 1}
		    8%  {-webkit-transform: translate(100px,0px) scale(0.95,1.05);opacity: 1}
		    10%  {-webkit-transform: translate(100px,0px) scale(1,1);opacity: 1}
		    12%   {-webkit-transform: translate(100px,0px); opacity: 1}
		    14%   {-webkit-transform: translate(100px,0px); opacity: 1}
		    16%   {-webkit-transform: translate(100px,0px); opacity: 1}
		    18%   {-webkit-transform: translate(100px,0px); opacity: 1}
		    20%   {-webkit-transform: translate(100px,0px); opacity: 1}
		    45%   {-webkit-transform: translate(100px,0px) scale(0.97,1.03); opacity: 1}
		    50%   {-webkit-transform: translate(100px,0px); opacity: 1}
		    60%   {-webkit-transform: translate(200px,0px); opacity: 0}
		    100%  {-webkit-transform: translate(200px,0px); opacity: 0}
		}
		@-webkit-keyframes che1_ani
		{
		    0%    {opacity: 1}
		    12%   {opacity: 1}
		    14%   {opacity: 0.5}
		    16%   {opacity: 1}
		    18%   {opacity: 0.5}
		    20%   {opacity: 1}
		    100%  {opacity: 1}

		}
		@-webkit-keyframes baoming
		{
		    0%  {opacity: 0}
		    58% {opacity: 0;-webkit-transform: scale(1.4);}
		    59% {opacity: 1;-webkit-transform: scale(1.4);}
		    70% {opacity: 1;-webkit-transform: scale(0.95);}
		    72% {opacity: 1;-webkit-transform: scale(1);}
		    80% {opacity: 0.8;-webkit-transform: scale(1.1);}
		    88% {opacity: 1;-webkit-transform: scale(1);}
		    93% {opacity: 0;-webkit-transform: scale(1.3);}
		    100%{opacity: 0}
		}
		@-webkit-keyframes shijia
		{
		    0%  {-webkit-transform: rotate(20deg) scale(0.8);opacity: 0}
		    10% {-webkit-transform: rotate(20deg) scale(0.75);opacity: 1}
		    20% {-webkit-transform: rotate(20deg) scale(0.85);}
		    28% {-webkit-transform: rotate(20deg) scale(0.75);}
		    38% {-webkit-transform: rotate(20deg) scale(0.85);}
		    47% {-webkit-transform: rotate(20deg) scale(0.75);opacity: 1}
		    55% {-webkit-transform: rotate(20deg) scale(0.90);opacity: 0}
		    100%{opacity: 0}

		}
		@-webkit-keyframes biaozhi_ani
		{
		    0%  {opacity: 0}
		    10% {opacity: 0}
		    20% {opacity: 1}
		    45% {opacity: 1}
		    55% {opacity: 0}
		    100%{opacity: 0}
		}
		#musicinfo
		{
			color: #fff;
			text-shadow: 1px 1px 2px #000;
			font-size: 15px;
			position: fixed;
			left: 432px;
		    top: 82px;
		    width: 60px;
		    height: 20px;
		    z-index: 100;
		    display: none;
		    opacity: 1;
		}
		@-webkit-keyframes heart_beating
		{
			from {opacity: 1;-webkit-transform: scale(1);}
			to   {opacity: 0.8;-webkit-transform: scale(0.8);}
		}
		@-webkit-keyframes heart1_moving
		{
			from  {opacity: 1;-webkit-transform: translate(0px,0px) scale(1);}
			to    {opacity: 0;-webkit-transform: translate(-20px,-50px) scale(1.5);}
		}
		@-webkit-keyframes heart2_moving
		{
			from  {opacity: 1;-webkit-transform: translate(0px,0px) scale(1);}
			to    {opacity: 0;-webkit-transform: translate(20px,-60px) scale(2);}
		}
		@-webkit-keyframes heart3_moving
		{
			from  {opacity: 1;-webkit-transform: translate(0px,0px) scale(1);}
			to    {opacity: 0;-webkit-transform: translate(70px,-40px) scale(2);}
		}
#enddiv
{
    position: absolute;
    width: 500px;
    height: 815px;
    background-color: rgba(0,0,0,0.7);
    z-index: 10000;
    display: none;
    opacity: 0;
}
#title_div
{
    width: 320px;
    height: 200px;
    left: 90px;
    top: 250px;
    color: #fff;
    font-size: 25px;
    position: relative;
    line-height: 45px;
    text-align: center;
    font-family: '微软雅黑';
    display:table;
}
#title_line
{
    position: absolute;
    width: 370px;
    height: 2px;
    background-color: #fff;
    top: 415px;
    left: 65px;
}
#reshowbtn
{
    position: absolute;
    width: 150px;
    height: 44px;
    border-radius: 10px;
    background-color: rgba(94,159,177,0.9);
    color: #fff;
    font-size: 22px;
    text-align: center;
    line-height: 44px;
    top: 446px;
    left: 74px;
}
#guanzhubtn
{
    position: absolute;
    width: 150px;
    height: 44px;
    border-radius: 10px;
    background-color: rgba(185,91,83,0.9);
    color: #fff;
    font-size: 22px;
    text-align: center;
    line-height: 44px;
    top: 446px;
    left: 268px;
}
@-webkit-keyframes fadein
{
	from  {opacity: 0}
	to    {opacity: 1}
}
	</style>

	
